// import Growi variable
@import 'variables';

@import '~reveal.js/css/reveal.css';
@import '~reveal.js/css/theme/black.css';

// hljs
.reveal {
  @import 'hljs';
}

.reveal {
  font-size: 32px;
  section * {
    font-family: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  }

  .slides > section {
    //text-align: left;
    padding: 0;

    &.only.present {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 2.5em;
      }
    }

    p {
      line-height: 1.6;

      &:first-child {
        margin-top: 0;
      }
    }

    pre {
      code {
        padding: 20px 40px;
      }
    }
    blockquote {
      width: 80%;
      padding: 20px 60px;
    }

    ul {
      margin-top: 0.2em;
      margin-bottom: 0.1em;
      > li {
        margin-bottom: 0.5em;
        line-height: 1.6;

        > ul > li {
          font-size: 0.85em;
        }
      }
    }

    h1:first-child {
      font-size: 2.2em;
    }
    h2:first-child {
      font-size: 1.8em;
    }
    h3,
    h4,
    h5,
    h6 {
      &:first-child {
        font-size: 1.5em;
      }
    }

    // {{{ table (copied from bootstrap .table
    table {
      width: 100%;
      margin-bottom: 1em;

      border-collapse: collapse;
      tr,
      td,
      th {
        border-collapse: collapse;
      }

      // Cells
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            padding: 1em;
            vertical-align: top;
            border-top: 1px solid #999;
          }
        }
      }
      // Bottom align for column headings
      > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #888;
      }
      // Remove top border from thead by default
      > caption + thead,
      > colgroup + thead,
      > thead:first-child {
        > tr:first-child {
          > th,
          > td {
            border-top: 0;
          }
        }
      }
      // Account for multiple tbody instances
      > tbody + tbody {
        border-top: 2px solid #888;
      }

      // .table-bordered
      border: 1px solid #999;
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            border: 1px solid #999;
          }
        }
      }
      > thead > tr {
        > th,
        > td {
          border-bottom-width: 2px;
        }
      }
    }
    // }}}
  }
}
